// @flow
import React from 'react';
import cx from 'classnames';
import { FaFacebook as FacebookIcon } from 'react-icons/fa';
import { FaGithub as GithubIcon } from 'react-icons/fa';
import { FaGoogle as GoogleIcon } from 'react-icons/fa';
import { FaWeibo as WeiboIcon } from 'react-icons/fa';
import { wechat as WechatIcon } from 'react-icons/fa';
import { FaQq as QqIcon } from 'react-icons/fa';
import './SocialLoginButton.scss';

type Props = {
    type: 'facebook' | 'google' | 'github' | 'weibo' | 'qq' | 'wechat',
    onSocialLogin(provider: string): void
};

const types = {
    github: {
        icon: GithubIcon
    },
    facebook: {
        icon: FacebookIcon
    },
    google: {
        icon: GoogleIcon
    },
    weibo: {
        icon: WeiboIcon
    },
    wechat: {
        icon: WechatIcon
    },
    qq: {
        icon: QqIcon
    }
};

const SocialLoginButton = (props: Props) => {
    const { type, onSocialLogin } = props;
    const { icon: Icon } = types[type];

    return (
        <div className={cx('social-login-button', type)} onClick={() => onSocialLogin(type)}>
            <div className="icon">
                <Icon />
            </div>
            <div className="text">
                {type} <span className="login">登录</span>
            </div>
        </div>
    );
};

SocialLoginButton.defaultProps = {
    type: 'github'
};

export default SocialLoginButton;
